<template>
  <div>
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      :loop="false"
    >
      <van-swipe-item>
        <van-image :src="require('@/assets/guide1.png')" fit="contain">
        </van-image>
      </van-swipe-item>
      <van-swipe-item>
        <van-image :src="require('@/assets/guide2.png')" fit="contain">
        </van-image>
      </van-swipe-item>
      <van-swipe-item>
        <van-image :src="require('@/assets/guide3.png')" fit="contain">
        </van-image>
      </van-swipe-item>
      <van-swipe-item>
        <van-image :src="require('@/assets/guide4.png')" fit="contain">
        </van-image>
      </van-swipe-item>
      <van-swipe-item>
        <van-image :src="require('@/assets/guide5.png')" fit="contain">
        </van-image>
        <van-button
          type="default"
          slot="default"
          class="startBtn"
          @click="$router.push('/layout')"
          >进入</van-button
        >
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  // 定义属性
  data() {
    return {}
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
}
</script>

<style lang="less">
.startBtn {
  z-index: 999;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 80%;
  font-family: PingFangSC-Medium;
  font-size: 32px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #3f3f3f;
  width: 366px;
  height: 80px;
  border: solid 2px #4a90e2;
  border-radius: 50px;
}
</style>
